<template>
  <div>
    <div style="margin: 20px">
      <h3>1.Switch开关，点击可以切换开关状态，可以传递参数设置开关的颜色</h3>
      <div style="margin: 5px 0 10px 0">
         开关激活的属性为: active-color
         开关关闭的属性为： inactive-color   
      </div>
      <!-- ===========第一个测试的demo========================================================== -->
      <my-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></my-switch>
    </div>
    <hr />
    <div style="margin: 20px">
      <h3>2.可以设置Switch开关激活和未激活的文本</h3>
      可以传入激活的文本参数activeText;未激活的文本参数inactive-text
      <!-- ==========================第二个测试的demo=============================================== -->
      <my-switch active-text="激活的文本测试" inactive-text="未激活的文本测试" v-model="value2"></my-switch> 
    </div>
    <hr />
    <div style="margin: 20px">
      <h3>3.以上两种方案的结合，既传入文本参数也传入颜色参数</h3>
      <my-switch active-text="激活的文本测试" inactive-text="未激活的文本测试" v-model="value3" active-color="#13ce66" inactive-color="#ff4949"></my-switch>
    </div>
    <hr>
    <div style="margin: 20px">
      <h3>4.可以传入其他类型</h3>
      <!-- ==========================第4个测试的demo=============================================== -->
      <my-switch active-value="100" inactive-value="0" v-model="value4" active-color="#13ce66" inactive-color="#ff4949"></my-switch>
      <div>此时的value值为{{value4}}</div>
    </div>
    <hr>
    <div style="margin: 20px">
      <h3>5.禁用状态</h3>
       设置disabled属性禁用switch
      <!-- ==========================第5个测试的demo=============================================== -->
      <my-switch :disabled="true" v-model="value5"></my-switch>
      <my-switch :disabled="true" v-model="value6"></my-switch>
    </div>
  </div>
</template>

<script>
import MySwitch from '../components/MySwitch.vue'
  export default {
    name: 'switchView',
    components: {
       MySwitch
    },
    data() {
      return {
        // 第一个测试的value值
        value: true,
        // 第二个测试的value值
        value2: true,
        // 第三个测试的value值
        value3: true,
        value4: '100',
        value5: false,
        value6: true
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>